
<body>
    <div class="bg">
        <div class="layui-bg-cyan"></div>
        <div class="layui-bg-white"></div>
    </div>
    <div class="layui-main layui-anim layui-anim-scaleSpring">
        <a href="index.html" class="logo ">
            <img src="<?= base_url() ?>public/img/logo.png" />
        </a>
        <div class="login-box">
            <h1>用户登录</h1>
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">账号</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-danger" lay-submit lay-filter="login">登录</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
            <h4 class="tips"><a href="<?= site_url('user/register') ?>" class="a">立即注册</a>|忘记密码?请点击<a href="javascript:void(0);" class="a" id="reset-btn">找回密码</a></h4>


        </div>
    </div>
    <div id="resetpass" class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">注册邮箱</label>
            <div class="layui-input-inline">
                <input type="text" name="email" id="email" placeholder="请输入注册邮箱" autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn" id="get-resetcode">获取验证码</button>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-inline">
                <input type="text" name="verifycode" placeholder="请输入4位验证码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="reset">重置密码</button>
            </div>
        </div>
    </div>
</body>

</html>

<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form,
                layer = layui.layer;
        form.verify({
            username: [/^[\d\w]{4,12}$/, '用户名必须4到12位，且不能出现空格'],
            password: [/^[\d\w_]{6,12}$/, '密码由6-12位字母数字,下划线组合而成']
        });
        form.on('submit(login)', function (data) {
            layer.open({
                type: 3,
                time: 1000,
                end: function () {
                    let username = data.field.username;
                    let password = data.field.password;
                    let jsonData = {
                        'username': username,
                        'password': password
                    };
                    let url = '<?= site_url('user/login_do') ?>';
                    $.post(url, jsonData, function (redata) {
                        if (redata.errno == '200') {
                            setTimeout(function () {
                                window.location.href = '<?= site_url('home/index') ?>';
                            }, 1000)
                        } else {
                            layer.msg(redata.error);
                            return false;
                        }
                    }, 'json');
                }
            });

            return false;
        });
        $("#reset-btn").click(function () {
            layer.open({
                title: false,
                type: 1,
                content: $('#resetpass'),
                area: ['500px', '200px']
            });

        });

        $("#get-resetcode").click(function () {
            let email = ($("#email").val()).trim();
            let url = "<?= site_url('user/send_verifycode') ?>";
            let jsonData = {
                'email': email
            };
            noCallbackRequest(url, jsonData, layer);
        })
        form.on('submit(reset)', function (data) {
            let email = data.field.email;
            let verifycode = data.field.verifycode;
            let jsonData = {
                'email': email,
                'verifycode': verifycode
            };
            let url = '<?= site_url('user/reset_via_email') ?>';
            request(url, jsonData, back_login, layer);
            return false;
        });

    });
    function back_login() {
        window.location.href = "<?= site_url('user/login') ?>";
    }
</script>